<template>
  <div class="login-page">
    <!-- 头部模块 -->
    <header><h1>智慧商城</h1></header>

    <!-- 主体区域 -->
    <div class="main">
      <!-- 搜索模块 -->
      <!-- 搜索你要找的商品 -->
      <van-search
        v-model="value"
        placeholder="搜索你要找的商品"
        input-align="center"
      />
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in img" :key="index"
        ><img :src="item.imgUrl" alt="" style="width: 100%; height: 100%"
      /></van-swipe-item>
    </van-swipe>
    <!-- 滚动字 -->
    <van-notice-bar
      scrollable
      left-icon="arrow"
      color="#ff1e02"
      background="#f2dbdb"
      text="店铺公告:智慧商城2.0全新上线，更多新品等你来选~"
    />
    <!-- nav -->
    <van-grid :column-num="5">
      <van-grid-item v-for="(item, index) in list" :key="index" :border="false">
        <img
          :src="item.imgUrl"
          alt=""
          style="width: 11.7333vw; height: 11.7333vw"
        />
        <span>{{ item.text }}</span>
      </van-grid-item>
    </van-grid>
    <!-- banner -->
    <div class="banner">
      <a href="./classify.html"
        ><img src="../../assets/banner.png" alt="" style="width: 100%"
      /></a>
    </div>

    <!-- 猜你喜欢 -->
    <div class="like">—— 猜你喜欢 ——</div>

    <!-- 商品列表 -->
    <van-card
      v-for="(item, index) in goodlist"
      :key="index"
      :price="item.goods_price_min"
      :desc="'已售' + item.goods_sales + '件'"
      :title="item.goods_name"
      :thumb="item.goods_image"
      :origin-price="item.line_price_max"
    />
  </div>
</template>

<script>
import { getsysj } from "@/api/user";
export default {
  name: "login-page",
  data() {
    return {
      value: "",
      img: [],
      list: [],
      goodlist: [],
    };
  },
  async created() {
    // 调用接口
    const res = await getsysj();
    console.log(res);
    this.img = res.data.pageData.items[1].data;
    this.list = res.data.pageData.items[3].data;
    this.goodlist = res.data.pageData.items[6].data;
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.login-page {
  margin-bottom: 30vw;
}
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
html,
body {
  position: relative;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
header {
  width: 100vw;
  height: 11.7333vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #c21401;
  text-align: center;
  line-height: 11.7333vw;
}
header h1 {
  font-size: 4.2667vw;
  color: #fff;
}
.main {
  padding-top: 11.7333vw;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 0px;
  text-align: center;
  background-color: #39a9ed;
}
.like {
  height: 7.7867vw;
  padding: 1.3333vw 0;
  background-color: #fff;
  font-size: 3.7333vw;
  text-align: center;
  line-height: 6.24vw;
  border-bottom: 1px solid #f6f6f6;
}
</style>